<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">

</style>
</head>

<body>
    <div id="audit-video-page-panel" class="audit-video-page-panel">
        <div class="row" style="margin-bottom: 0px">
           <div class="row" style="margin-bottom: 0px">
            <div class="input-field col s2">
              <input placeholder="用户名称" id="audit-video-username" type="text">
            </div>
            <div class="input-field col s2">
              <input placeholder="设备名称" id="audit-video-deviceName" type="text">
            </div>
            <div class="input-field col s2">
              <input placeholder="开始时间" id="audit-video-stime-date" type="text" class="datepicker">
            </div>
            <div class="input-field col s2">
              <input placeholder="结束时间" type="text" class="datepicker" id="audit-video-etime-date">
            </div>
            <div class="col s2">
              <button style="margin-top: 15px" onclick="auditVideoObj.onQuery()" class="btn waves-effect waves-light gback align-right" name="action">查询
                <i class="material-icons right">find_in_page</i>
              </button>
            </div>
          </div>
        </div>
        <div class="row">
            <div class="col s12">
                <table id="audit-video-table" class="hover" style="width: 100%; border-bottom: 2px solid #7621A2;">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>用户名称</th>
                            <th>设备名称</th>
                            <th>录制时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!--  Scripts-->
    <script src="/static/js/jquery-2.1.1.min.js"></script>
    <script src="/static/js/materialize.min.js"></script>
    <script src="/static/js/jquery.md5.js"></script>
    <script src="/static/three/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/three/datatables/dataTables.material.js"></script>
    <script src="/static/three/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="/static/js/utils.js"></script>
    <script src="/static/js/http.js"></script>
    <script type="text/javascript">
        var auditVideoObj = {
            table : null,
            init : function() {
                M.AutoInit();
                $(".datepicker").datepicker({
                    format:"yyyy-mm-dd",
                    showClearBtn: true,
                    i18n: {
                        cancel: '取消',
                        clear: '清除',
                        done: '确定',
                        months: [
                            '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                        ],
                        monthsShort: [
                            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
                        ],
                        weekdays: [
                            '周日', '周一', '周二', '周三', '周四', '周五', '周六'
                        ],
                        weekdaysShort: [
                            '周日', '周一', '周二', '周三', '周四', '周五', '周六'
                        ],
                        weekdaysAbbrev: [
                            '日', '一', '二', '三', '四', '五', '六'
                        ]
                    }
                });
                
                auditVideoObj.table = $('#audit-video-table').DataTable({
                    "fnServerData" : function(sSource, aoData, fnCallback) {
                        aoData.push({name:"username",value: $("#audit-video-username").val()});
                        aoData.push({name:"deviceName",value: $("#audit-video-deviceName").val()});
                        
                        if($("#audit-video-stime-date").val()){
                            aoData.push({name:"stime",value: $("#audit-video-stime-date").val() + " 00:00:00"});
                        }
                        
                        if($("#audit-video-etime-date").val()){
                            aoData.push({name:"etime",value: $("#audit-video-etime-date").val() + " 23:59:59"});
                        }
                        
                        $.httpSend({
                            url : '/auditvideo/list/get',
                            type : 'get',
                            "data" : aoData,
                            success : function(resp) {
                                fnCallback(resp);
                            }
                        })
                    },
                    "language": {
                        "url": "/static/three/datatables/Chinese.json"
                    },
                    "lengthMenu": [10, 50, 75, 100],
                    "pageLength": 10,
                    "autoWidth": true,
                    "destroy": true,
                    "info": true,
                    "paging": true,
                    "processing": true,
                    "serverSide": true,
                    "serverSize":true,
                    "ordering": false,
                    "searching": false,
                    "columns" : [
                        {"data" : "autoid"},
                        {"data" : "username"},
                        {"data" : "deviceName"},
                        {"data" : "ctime"},
                        {
                            "data" : "id",
                            "fnCreatedCell":function(nTd, sData, oData, iRow, iCol) {
                                var allhtml = "";
                                allhtml += '<a href="/auditvideo?uuid='+ oData.uuid +'" target="bank" eid="'+ sData +'" title="查看录像" class="btn-default halfway-fab" href="#" style="margin-right: 5px;"><i class="material-icons"">ondemand_video</i></a>';
                                allhtml += '<a onclick="auditVideoObj.onDel(this)" eid="'+ sData +'" title="删除" class="btn-default halfway-fab" href="#" style="margin-right: 5px;"><i class="material-icons" style="color:red;">delete</i></a>';
                                $(nTd).html(allhtml);
                            }
                        },
                    ]
                });
            },
            onShowVideo: function(){
                var eid = $(cur).attr("eid");
            },
            onQuery: function(){
                auditVideoObj.table.draw(false);
            },
            onDel: function(cur){
                var eid = $(cur).attr("eid");
                $.conf({
                    title: "删除提醒",
                    content: "是否删除此记录",
                    okfun: function(){
                        
                        $.httpSend({
                            url : '/auditvideo/video/del',
                            type : 'post',
                            data : JSON.stringify({
                                id:eid,
                            }),
                            success : function(resp) {
                                auditVideoObj.table.draw(false);
                            }
                        })
                    }
                });
            }
        }
        auditVideoObj.init();
    </script>
</body>

</html>